<template>
  <div class="synergy-talent">
    <p class="title-p">当前位置：{{ pageType }} <span class="el-icon-arrow-right"></span> {{ subName }}</p>
    <div class="panel2">
      <el-tabs v-model="activeName" @click="handleSelect">
        <el-tab-pane name='first'>
          <span slot='label'><i class="icon iconfont icon-qiye"></i> 企业列表</span>
          <CompanyList
            v-if="!noDataCom"
            ref="companyList"
            :companyList="compaList"
            :totalComp="totalComp"
            @changePageNumCom="changePageNumCom"
          />
          <div v-if="noDataCom" class="no-data">
            <loading1 :emptyText="emptyText"/>
          </div>
        </el-tab-pane>
        <el-tab-pane  name='second'>
          <span slot='label'><i class="icon iconfont icon-rencai"></i> 人才列表</span>
          <PersonnelList
            v-if="!noDataPer"
            ref="personnelList"
            :pList="personlData"
            :totalPerson="totalPerson"
            @changePageNumPer="changePageNumPer"
          />
          <div v-if="noDataPer" class="no-data">
            <loading1 :emptyText="emptyText"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import CompanyList from "@/views/components/CompanyList.vue";
import PersonnelList from "@/views/components/PersonnelList.vue";
export default {
  components: {
    CompanyList,
    PersonnelList,
  },
  data() {
    return {
      activeName:'first',
      compaList:[],
      compatAllList:[],
      personlData:[],
      personlAllData:[],
      targetId:'',
      pageType:'',
      pageType:'',
      subName:'',
      totalComp: 0,
      totalPerson: 0,
      pageComIndex:1,
      pageComSize: 10,
      pagePersonIndex:1,
      pagePersonSize: 12,
      noDataCom:true,
      noDataPer:true,
      emptyText: "数据加载中...",
    };
  },
  created(){
    this.handleAction();
  },
  mounted() {
    this.searchCompanyList();
    this.searchPersonnelList();
  },
  methods: {
    handleAction(){
      let tabType = this.$route.query.tabType;
      this.pageType = this.$route.query.pageType;
      this.subName = this.$route.query.name;
      // com：企业 per：人才
      this.targetId = this.$route.query.id;
      if( tabType === 'com' ){
        this.activeName = 'first';
      }else if( tabType === 'per' ){
        this.activeName = 'second'
      }
    },
    handleSelect(item) {
      this.activeIndex = item;
    },
    //查公司列表
    searchCompanyList(){
      this.emptyText = "数据加载中..."
      this.$get(this.$Url.technology.companiesList, {
        id:this.targetId,
        pageSize: this.pageComSize,
        pageNum:this.pageComIndex,
        size:1000,
      })
      .then((res) => {
          let ths = this
          let data = res.data;
          this.companyList = [];
          if (data.result.length && data.result.length > 0) {
            this.noDataCom = false
            let compaList = []
            data.result.forEach((i, index) => {
              let newName = i.name.replace(/[<em>|</em>]/g, "");
              compaList.push({
                eid: i.eid, 
                name: newName,
                name_wordlight: i.name,
                pingfen: i.pingfen,
                latest_address:i.latest_address,
                logo_url:i.logo_url,
                oper_name:i.oper_name,
                regist_capi:i.regist_capi,
                start_date:i.start_date,
              });
            });
            this.compaList = JSON.parse(JSON.stringify(compaList)).slice((this.pageComIndex-1)*this.pageComSize,this.pageComIndex*this.pageComSize)
            this.compatAllList = JSON.parse(JSON.stringify(compaList))
            this.compaList.forEach((v, index) => {
              if (!v.logo && v.eid) {
                this.getLogo(v.eid, d => {
                  ths.$set(ths.compaList[index], 'logo', d)
                })
              }
            })
            this.totalComp = data.result.length
          } else {
            this.emptyText = "暂无数据";
            this.noDataCom = true
          }
        })
        .catch((e) => {
          this.emptyText = "暂无数据";
            this.noDataCom = true
        });
    },
    // 获取企业logo
    getLogo(eid, func) {
      this.$get(this.$Url.search.companyLogo, {
        eid: eid,
      }).then(res => {
        let data = res.data || ''
        func && func(data)
      }).catch(err => {})
    },
    //查人才列表
    searchPersonnelList() {
      this.emptyText = "数据加载中...";
      let params = {
        id: this.targetId,
        pageSize: this.pagePersonSize,
        pageNum:this.pagePersonIndex,
        size: 1000,
      };
      this.$get(this.$Url.technology.personnelList, params)
        .then(( res ) => {
          let data = res.data;
          if (data.result && data.result.length > 0) {
            this.noDataPer = false
            let personlData = data.result ;
            this.personlData = JSON.parse(JSON.stringify(personlData)).slice((this.pagePersonIndex-1)*this.pagePersonSize,this.pagePersonIndex*this.pagePersonSize)
            this.personlAllData = JSON.parse(JSON.stringify(personlData))
            this.totalPerson = data.result.length
          } else {
            this.emptyText = "暂无数据";
            this.noDataPer = true
          }
        })
        .catch((e) => {
          this.emptyText = "暂无数据";
          this.noDataPer = true
        });
    },
    changePageNumCom(index){
      let ths = this
      this.pageComIndex = index;
      this.compaList = JSON.parse(JSON.stringify(this.compatAllList)).slice((this.pageComIndex-1)*this.pageComSize,this.pageComIndex*this.pageComSize)
      this.compaList.forEach((v, index) => {
        if (!v.logo && v.eid) {
          this.getLogo(v.eid, d => {
            ths.$set(ths.compaList[index], 'logo', d)
          })
        }
      })
      // this.searchCompanyList()
    },
    changePageNumPer(index){
      this.pagePersonIndex = index;
      this.personlData = JSON.parse(JSON.stringify(this.personlAllData)).slice((this.pagePersonIndex-1)*this.pagePersonSize,this.pagePersonIndex*this.pagePersonSize)
      // this.searchPersonnelList()
    }  
    
  },
};
</script>
<style lang="scss" scoped>
.synergy-talent{
  .panel2{
    margin-top:0rem;
  }
  .title-p{
    font-size: 0.14rem;
    height:0.5rem;
    line-height: 0.5rem;
    padding:0 0.6rem;
    color: #999;
  }
}
.nodata{
  line-height: 0.6rem;
  text-align: center;
}
</style>
<style>
.synergy-talent .el-tabs__nav-scroll{
  padding:0 0.55rem;
  background:#fff;
} 
.synergy-talent .el-tabs__nav-scroll .el-tabs__nav{
  padding:0.05rem 0;
}
</style>